<template>
  <div class="total">
    <van-tree-select class="total-select"
      height="86%"
      v-model:main-active-index="activeIndex"
      :items="items"
    >
      <template #content>
        <!-- 第一个页面 -->
        <div v-if="activeIndex === 0">
          <div class="right-content">
            <img
              src="https://x.dscmall.cn/storage/data/touch_catads/15630384831872.jpg"
              alt=""
            />
          </div>
          <ul class="ele-header">
            <li v-for="item in showgoods" :key="item.cat_id">
              <span class="li-one">{{ item.cat_name }}</span>
              <ul class="ele-tool">
                <li v-for="items in item.child" :key="items.cat_id">
                  <router-link
                    class="sendcontent"
                    :to="{ name: 'detail', params: { id: items.cat_id } }"
                  >
                    <img :src="items.touch_icon" alt="" />
                    <span>{{ items.cat_name }}</span>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- 第二个页面 -->
        <div v-if="activeIndex === 1">
          <div class="right-content">
            <img
              src="https://x.dscmall.cn/storage/data/touch_catads/15630385461636.jpg"
              alt=""
            />
          </div>
          <ul class="ele-header">
            <li v-for="item in showgoodstwo" :key="item.cat_id">
              <span class="li-one">{{ item.cat_name }}</span>
              <ul class="ele-tool">
                <li v-for="items in item.child" :key="items.cat_id">
                  <router-link
                    class="sendcontent"
                    :to="{ name: 'detail', params: { id: items.cat_id } }"
                  >
                    <img :src="items.touch_icon" alt="" />
                    <span>{{ items.cat_name }}</span>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <!-- 第三个页面 -->

        <div v-if="activeIndex === 2">
          <div class="right-content">
            <img
              src="https://x.dscmall.cn/storage/data/touch_catads/15630385672096.jpg"
              alt=""
            />
          </div>
          <ul class="ele-header">
            <li v-for="item in showgoodsthree" :key="item.cat_id">
              <span class="li-one">{{ item.cat_name }}</span>
              <ul class="ele-tool">
                <li v-for="items in item.child" :key="items.cat_id">
                  <router-link
                    class="sendcontent"
                    :to="{ name: 'detail', params: { id: items.cat_id } }"
                  >
                    <img :src="items.touch_icon" alt="" />
                    <span>{{ items.cat_name }}</span>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- 第四个页面 -->

        <div v-if="activeIndex === 3">
          <div class="right-content">
            <img
              src="https://x.dscmall.cn/storage/data/touch_catads/15630387587769.jpg"
              alt=""
            />
          </div>
          <ul class="ele-header">
            <li v-for="item in showgoodsfour" :key="item.cat_id">
              <span class="li-one">{{ item.cat_name }}</span>
              <ul class="ele-tool">
                <li v-for="items in item.child" :key="items.cat_id">
                  <router-link
                    class="sendcontent"
                    :to="{ name: 'detail', params: { id: items.cat_id } }"
                  >
                    <img :src="items.touch_icon" alt="" />
                    <span>{{ items.cat_name }}</span>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <!-- 第五个页面 -->

        <div v-if="activeIndex === 4">
          <div class="right-content">
            <img
              src="https://x.dscmall.cn/storage/data/touch_catads/15630385077656.jpg"
              alt=""
            />
          </div>
          <ul class="ele-header">
            <li v-for="item in showgoodsfive" :key="item.cat_id">
              <span class="li-one">{{ item.cat_name }}</span>
              <ul class="ele-tool">
                <li v-for="items in item.child" :key="items.cat_id">
                  <router-link
                    class="sendcontent"
                    :to="{ name: 'detail', params: { id: items.cat_id } }"
                  >
                    <img :src="items.touch_icon" alt="" />
                    <span>{{ items.cat_name }}</span>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <!-- 第六个页面 -->

        <div v-if="activeIndex === 5">
          <div class="right-content">
            <img
              src="https://x.dscmall.cn/storage/data/touch_catads/15630385077656.jpg"
              alt=""
            />
          </div>
          <ul class="ele-header">
            <li v-for="item in showgoodssix" :key="item.cat_id">
              <span class="li-one">{{ item.cat_name }}</span>
              <ul class="ele-tool">
                <li v-for="items in item.child" :key="items.cat_id">
                  <router-link
                    class="sendcontent"
                    :to="{ name: 'detail', params: { id: items.cat_id } }"
                  >
                    <img :src="items.touch_icon" alt="" />
                    <span>{{ items.cat_name }}</span>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <!-- 第七个页面 -->

        <div v-if="activeIndex === 6">
          <div class="right-content">
            <img
              src="https://x.dscmall.cn/storage/data/touch_catads/15630385872349.jpg"
              alt=""
            />
          </div>
          <ul class="ele-header">
            <li v-for="item in showgoodsseven" :key="item.cat_id">
              <span class="li-one">{{ item.cat_name }}</span>
              <ul class="ele-tool">
                <li v-for="items in item.child" :key="items.cat_id">
                  <router-link
                    class="sendcontent"
                    :to="{ name: 'detail', params: { id: items.cat_id } }"
                  >
                    <img :src="items.touch_icon" alt="" />
                    <span>{{ items.cat_name }}</span>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  data() {
    const activeIndex = ref(0);
    return {
      activeIndex,
      items: [
        { text: "家用电器" },
        { text: "男装女装" },
        { text: "鞋靴箱包" },
        { text: "手机数码" },
        { text: "电脑办公" },
        { text: "家居家纺" },
        { text: "个人化妆" },
      ],
    };
  },
  methods: {},
  mounted() {
    this.$store.dispatch({
      type: "getgoods",
    }),
      this.$store.dispatch({
        type: "getgoodsTwo",
      });
    this.$store.dispatch({
      type: "getgoodsThree",
    });
    this.$store.dispatch({
      type: "getgoodsFour",
    });
    this.$store.dispatch({
      type: "getgoodsFive",
    });
    this.$store.dispatch({
      type: "getgoodsSix",
    });
    this.$store.dispatch({
      type: "getgoodsSeven",
    });
  },
  computed: {
    showgoods() {
      return this.$store.state.classify.classifygoods;
    },
    showgoodstwo() {
      return this.$store.state.classify.classifygoodstwo;
    },
    showgoodsthree() {
      return this.$store.state.classify.classifygoodsthree;
    },
    showgoodsfour() {
      return this.$store.state.classify.classifygoodsfour;
    },
    showgoodsfive() {
      return this.$store.state.classify.classifygoodsfive;
    },
    showgoodssix() {
      return this.$store.state.classify.classifygoodssix;
    },
    showgoodsseven() {
      return this.$store.state.classify.classifygoodsseven;
    },
  },
};
</script>

<style scoped lang="less">
.total {

  .total-select{
    position:fixed;
    top: 60px;
    left: 0px;
  }
  .right-content {
    img {
      width: 100%;
    }
  }
  .van-sidebar .van-tree-select__nav{
    position: fixed;
  }

  .ele-header {
    text-align: center;
    .li-one {
      display: inline-block;
      margin-top: 20px;
      // margin-bottom: 10px;
    }
    .ele-tool {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      li {
        height: 100px;
        width: 30%;
        // flex: 1 1 30.3%;
        // border: 1px solid tomato;
        margin-top: 20px;
        .sendcontent {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          span {
            color: #777;
            font-size: 14px;
          }
          img {
            width: 60%;
            height: 60%;
          }
        }
      }
    }
  }
}
</style>
